.custom-project-templates
  - if @groups_with_project_templates.present?
    - @groups_with_project_templates.each do |group|
      - projects = group.projects.not_aimed_for_deletion
      .template-group-options.js-template-group-options{ class: ('expanded border-top-0' if @groups_with_project_templates.first == group) }
        .template-header.d-flex.align-items-center
          .template-subgroup.d-flex.flex-fill.align-items-center
            .template-options-icon-container.d-flex.justify-content-center.align-items-center.gl-mr-3
              = sprite_icon('chevron-lg-down', css_class: 's16 options-expanded-icon')
              = sprite_icon('chevron-lg-right', css_class: 's16 options-collapsed-icon')
            .avatar-container.s40
              = group_icon(group, alt: group.name, class: 'btn-template-icon avatar s40 avatar-tile', lazy: false)
            .template-subgroup-name.gl-ml-2
              %strong= group.full_name
              - if group.description.present?
                .text-muted
                  = group.description
          .template-subgroup-project-count
            = gl_badge_tag projects.count, nil, { class: 'gl-font-weight-bold' }

        - projects.each do |project|
          .template-option.align-items-center{ data: { testid: 'template-option-container' } }
            .avatar-container.s40
              = project_icon(project, alt: project.name, class: 'btn-template-icon avatar s40 avatar-tile', lazy: false)
            .description.gl-ml-2
              %strong
                = project.title
              %br
              .text-muted
                = project.description
            .controls.d-flex.align-items-baseline
              %a.btn.gl-button.btn-default.gl-mr-3{ href: project_path(project), rel: 'noopener noreferrer', target: '_blank' }
                = _('Preview')
              %label.btn.gl-button.btn-confirm.custom-template-button.choose-template.gl-mb-0{ for: project.name }
                %input{ type: "radio", autocomplete: "off", name: "project[template_project_id]", id: project.name, value: project.id, data: { subgroup_full_path: project.namespace.full_path, target_group_full_path: @target_group&.full_path, subgroup_id: project.namespace_id, template_name: project.name, parent_group_id: @target_group&.id || group.parent_id } }
                %span{ data: { testid: 'use-template-button' } }
                  = _('Use template')

    = paginate @groups_with_project_templates, params: { controller: 'users', action: 'available_group_templates', username: current_user.username }, theme: 'gitlab', remote: true
  - else
    .bs-callout.bs-callout-warning
      %p
        = _("Custom project templates have not been set up for groups that you are a member of. They are enabled from a group’s settings page. Contact your group’s Owner or Maintainer to setup custom project templates.")
      %strong
        = render Pajamas::ButtonComponent.new(href: help_page_path("user/group/custom_project_templates")) do
          = _("Learn more about group-level project templates")
